import React, { Component } from 'react';
import { Grid, Loading, Feedback } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import { GetUrlParam, LoginReq } from '../../../../baseConfig';
import { getRDchart, getPiachart } from '../../../../echarts-figures.js';
import DataBinder from '@icedesign/data-binder';

var echarts = require('echarts');

const { Row, Col } = Grid;
const Toast = Feedback.toast;

@DataBinder({
  ChartData: {
    // url: 'api/getTraditionalScoreChart',
    url: `${global.constants.GOLDEYEGETHOST}cattle/info_attr_trend`,
    type: 'get',
    params: {
      // secu_code:localStorage.getItem("TOKEN")
    },
    defaultBindingData: {
      // dates: [],
      // values: [],
    }
  },
  PiaChartData: {
    // url: 'api/getTraditionalScoreChart',
    url: `${global.constants.GOLDEYEGETHOST}cattle/opinion_origin_type`,
    type: 'get',
    // params: {
    //   machineCode:localStorage.getItem('machineCode')
    // },
    defaultBindingData: {
      // dates: [],
      // values: [],
    }
  }
})
export default class ReviewOverview extends Component {
  static displayName = 'ReviewOverview';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    // console.log("props",props);
    super(props);
    this.state = {
      machineCode:this.props.machineCode,
      chartId : 'traditionalScoreChart',
      PiaChartId: 'piaChart',
      leftloadingVisible:false,
      rightloadingVisible:false,
      // value:'无叠加',
      numbers:{}
    }
  }

  initChart(config,id,a) {
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if( myChart === undefined){
        myChart = echarts.init(document.getElementById(id));
    }
    if(a){
      myChart.setOption(config,true);
    }else{
      myChart.setOption(config);
    }
    window.addEventListener('resize',()=>{
      myChart.resize();
    });
  }


  show = (content) => {
    Toast.show({
      type: "error",
      content: content,
      afterClose: () => console.log("")
    });
  };

  componentWillMount(){
    // LoginReq(GetUrlParam("secu_code"));
  }

  componentDidMount() {
    // if(GetUrlParam("secu_code")!=null){
      this.setState({
        leftloadingVisible:true,
        rightloadingVisible:true
      })
      this.props.updateBindingData('ChartData',{
        'params': {
          secu_code:GetUrlParam("secu_code")
        }
      }, (data) => {
        // console.log("ChartData",data.data);
        this.setState({
          leftloadingVisible:false,
          numbers:getRDchart(
            '信息属性走势图',
            data.data.data_info.dates,
            data.data.data_info.data,
          )
        })
        this.initChart(this.state.numbers,this.state.chartId);
      });

      this.props.updateBindingData('PiaChartData',{
        'params': {
          secu_code:GetUrlParam("secu_code")
        }
      }, (data) => {
        // console.log(data);
        this.setState({
          rightloadingVisible:false,
          numbers:getPiachart(
            '媒体来源占比',
            data.data.data_list,
          )
        })
        this.initChart(this.state.numbers,this.state.PiaChartId);
      });
    // }else{
    //   this.show("机器码错误");
    // }
  }

  render() {
    // const { ChartData } = this.props.bindingData;
    return (
      <Row wrap gutter="20">
        <Col s="12" xxs="24">
          <IceContainer style={styles.container} title="信息属性走势图">
              <Loading style={{display: 'block'}} visible={this.state.leftloadingVisible} shape="fusion-reactor" color="#fff"></Loading>
              {!this.state.leftloadingVisible && <div id={this.state.chartId} style={{width: "540px", height: "360px"}}></div>}
          </IceContainer>
        </Col>
        <Col s="12" xxs="24">
          <IceContainer style={styles.container} title="媒体来源占比">
              <div id={this.state.PiaChartId} style={{width: "540px", height: "360px"}}><Loading style={{display: 'block'}} visible={this.state.rightloadingVisible} shape="fusion-reactor" color="#fff"></Loading></div>
          </IceContainer>
        </Col>
      </Row>
    );
  }
}

const styles = {
  container: {
    height: 400,
    padding:'25px',
    borderRadius: 0,
  },
  overviewData: {
    marginTop: 25,
    fontSize: 30,
  },
  overviewDataUnit: {
    fontSize: 18,
  },
  overviewDataDetail: {
    marginTop: 10,
    display: 'flex',
    justifyContent: 'space-between',
  },
  overviewDataDetailCount: {
    fontSize: 18,
  },
  overviewDataDetailDesc: {
    fontSize: 12,
    marginTop: 5,
    color: '#666',
  },
  overviewDataExtraLinks: {
    marginTop: 20,
    paddingTop: 20,
    borderTop: '1px solid #eee',
  },
  overviewDataExtraLinksTitle: {
    fontSize: 12,
    color: '#666',
  },
  overviewDataExtraLinksWrapper: {
    marginTop: 10,
  },
  overviewDataExtraLink: {
    marginRight: 5,
  },
  overviewRatingWrapper: {
    display: 'flex',
    alignItems: 'center',
  },
  overviewRatingCount: {
    fontSize: 30,
    marginRight: 10,
  },
  overviewDetail: {
    marginTop: 20,
  },
  overviewDetailItem: {
    display: 'flex',
    alignItems: 'center',
    marginTop: 10,
  },
  overviewDetailItemPercentWrapper: {
    flex: 1,
  },
  overviewDetailItemPercent: {
    display: 'inline-block',
  },
  overviewDetailItemText: {
    marginRight: 10,
  },
};
